<template>
  <!-- 需求单 -->
  <div>
    <!-- 第一行 -->
    <el-row>
      <el-col span="2.5">
        <el-button icon="el-icon-menu">
          黄金品类
        </el-button>
      </el-col>
      <el-col span="2.5">
        <el-button icon="el-icon-plus">
          <router-link to="/menu/newDemandOrder"
                       tag="span">
            新增需求单
          </router-link>
        </el-button>
      </el-col>
      <el-col span="2.5">
        <el-button icon="el-icon-printer">
          导出
        </el-button>
      </el-col>
      <el-col span="6">
        <el-date-picker v-model="date"
                        @blur="searchDate"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="timestamp"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-col>
      <el-col span="1">
        <div> &nbsp;</div>
      </el-col>
      <el-col span="4">
        <el-input v-model="input"
                  placeholder="请输入内容"></el-input>
      </el-col>
      <el-col span="2">
        <el-button type="primary"
                   @click="search"
                   icon="el-icon-search">搜索</el-button>

      </el-col>
      <el-col span="3">
        <el-button circle="true"
                   icon="el-icon-delete-solid"></el-button>
        <el-button circle="true"
                   icon="el-icon-refresh" @click="refresh()"></el-button>

      </el-col>
    </el-row>

    <!-- 表格 -->

    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column label="序号"
                       align="center"
                       width="50">
        <template slot-scope="scope">
          <span>
            {{scope.$index+1}}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="orderNum"
                       align="center"
                       label="单号"
                       width="180">
      </el-table-column>

      <el-table-column prop="client"
                       align="center"
                       label="客户"
                       width="100">
      </el-table-column>
      <el-table-column prop="department"
                       align="center"
                       label="采购部门"
                       width="100">
      </el-table-column>
      <el-table-column prop="weight"
                       align="center"
                       label="重量"
                       width="80">
      </el-table-column>
      <el-table-column prop="amount"
                       align="center"
                       label="数量"
                       width="80">
      </el-table-column>
      <el-table-column prop="aogWeight"
                       align="center"
                       label="来货重量"
                       width="80">
      </el-table-column>
      <el-table-column prop="aogNum"
                       align="center"
                       label="来货数量"
                       width="80">
      </el-table-column>
      <el-table-column prop="prepared"
                       align="center"
                       label="制单人"
                       width="100">
      </el-table-column>
      <el-table-column prop="makingTime"
                       align="center"
                       label="制单时间"
                       width="170">
      </el-table-column>
      <el-table-column label="状态"
                       align="center"
                       width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1 ">
            定稿
          </span>
          <span v-if="scope.row.status == 2 ">
            草稿
          </span>
          <span v-if="scope.row.status == 0 ">
            已取消
          </span>
        </template>

      </el-table-column>
      <el-table-column prop="date"
                       align="center"
                       label="操作"
                       width="150">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="mini"
                     icon="el-icon-edit"
                     circle
                     @click="edit(scope.row.id)">
          </el-button>
          <el-button type="primary"
                     size="mini"
                     icon="el-icon-view"
                     circle
                     @click="detail(scope.row.id)">
          </el-button>
          <el-button type="primary"
                     size="mini"
                     icon="el-icon-delete"
                     circle
                     @click="cancel(scope.row.id)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination style="float:right"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="1"
                   :page-sizes="[10, 20, 30]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      input: '',
      date: '',
      //需求单列表
      tableData: [],
      //分页
      pageNum: 1,
      pageSize: 10,
      total: null,
      date:["null","null"],
    }
  },
  methods: {
    detail(id) {
      //跳转到需求单详情页面
      this.$router.push({ name: 'demandOrderDetails', query: { id: id } })
    },
    search() {
      //按输入入库编号查
      //alert(this.date);
    },
    searchDate() {
      //按时间查询
      this.start()
    },
    search(){
      //清空
      this.tableData = []
      if(this.input == ''){
        this.$message.error("请输入查询信息")
        return;
      }
      this.axios.get(this.baseUrl + 'requisitionForm/findOneByOrderNum',{
        params:{
          orderNum : this.input
        }
      }).then(res =>{
        console.log(res.data.data);
        this.tableData.push(res.data.data)
        this.total = null;
      })
    },
    //刷新页面
    refresh(){
      this.reload()
    },

    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.start()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.start()
    },
    edit(id) {
      //跳转到编辑需求单页面
      this.$router.push({ name: 'editDemandList', query: { id: id } })
    },
    cancel(id) {
      this.$confirm('取消当前此需求单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
          this.axios({
            method: 'put',
            url: this.baseUrl + 'requisitionForm/cancel',
            params: {
              id: id,
            },
          }).then((res) => {
            console.log(res.data.data)
            this.tableData = res.data.data
            this.reload()
            this.$message({
              type: 'success',
              message: '取消成功!',
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //分页
    start() {
      console.log(this.date[0]);
      console.log(this.date[1]);
      //展示需求表
      this.axios({
        method: 'get',
        url: this.baseUrl + 'requisitionForm/findAllRequisitionForm',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          dateStart:this.date[0],
          dateEnd:this.date[1],
        },
      }).then((res) => {
        console.log(res.data.data)
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      })
    },
  },
  created() {
    //展示需求表
    this.start()
  },
}
</script>

<style scoped>
</style>